<template>
	<view
		class="mx-1 relative row-center"
		:style="{ width: width + 'rpx', height: height + 'rpx' }"
		:class="[mb ? 'mb-2-2' : '']"
	>
		<view class="absolute left-0 right-0" style="z-index: -1">
			<image src="/static/act/coupon-bg.jpg" :style="{ width: width + 'rpx', height: height + 'rpx' }" />
		</view>
		<view style="width: 280rpx" class="text-center">
			<text class="text-xxxxl font-semibold" style="color: #d7236d">¥ 30</text>
		</view>
		<view class="flex-1 h-full flex flex-column justify-around border-box py-2-2">
			<text class="block text-center color-main text-xl">
				{{ data.couponsName }}
			</text>
			<view class="row-center">
				<text class="color-main text-n">使用范围：</text>
				<view class="flex-1 pr-1-3 nowrap text-ellipsis-1">
					<template v-if="data.couponsScope === CouponsScope.self">
						<text
							class="text-s color-main"
							v-if="!data.productCategoryNameList || data.productCategoryNameList.length === 0"
							>--</text
						>
						<text v-else class="text-s color-main">{{ data.productCategoryNameList.join(',') }}</text>
					</template>
					<template v-else>
						<text class="text-s color-main" v-if="!data.unionNameList || data.unionNameList.length === 0">--</text>
						<text v-else class="text-s color-main">{{ data.unionNameList.join(',') }}</text>
					</template>
				</view>
			</view>
			<view>
				<text class="color-main text-n">有效期：</text>
				<text class="color-main text-s">{{ dateText }}</text>
			</view>
			<view>
				<text class="color-main text-n">使用时段：</text>
				<text class="color-main text-s">{{ timeText }}</text>
			</view>
			<view class="text-center" @click="toDetail">
				<view class="inline-block px-3-1 py-1-1 border b-active rounded-xl">
					<text class="color-main text-n">查看券详情</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { CouponsScope } from '@/base/common-data.js';
import dateUtil from '@/uni-sdk/utils/date.js';

const props = defineProps({
	data: Object,
	disabled: Boolean,
	mb: {
		type: Boolean,
		default: true,
	},
});
const mx = 10;
const width = 750 - mx * 2;
const whFactor = 780 / 376;
const height = width / whFactor;

const dateText = computed(() => {
	if (props.data.isPermanently) return '长期';
	const startPeriod = props.data.startPeriod;
	const endPeriod = props.data.endPeriod;
	if (!startPeriod || !endPeriod) {
		return '--';
	}
	return `${dateUtil.format(startPeriod, 'yyyy-MM-dd')} ~ ${dateUtil.format(endPeriod, 'yyyy-MM-dd')}`;
});

const timeText = computed(() => {
	if (props.data.isAllDay) return '全天';
	if (!props.data.startTime) return '--';
	return `${props.data.startTime} ~ ${props.data.endTime}`;
});

function toDetail() {
	uni.navigateTo({
		url: '/pages/coupon/coupon',
		success(e) {
			e.eventChannel.emit('data', props.data);
		},
	});
}
</script>

<style></style>
